<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">

        <p>我是上</p>
        <input type="button" value="你不上班哈" @click="handler">
        <p>我是下</p>
        <!-- 2.绑定事件 -->
        <my-book v-on:myclick="myClick"></my-book>
    </div>
</body>
<script src="./vue.global.js"></script>
<script>

// 定义一个子组件
const MyBook = {
    //  1. 声明事件
    emits:['myclick'],
    template:`
        <div>
            <h5>书籍组件</h5>
            <input type="button" value="去触发myclick" @click="triggerMyclick" />
        </div>
    `,
    methods:{
        triggerMyclick(){
            //触发事件
            this.$emit("myclick",{
                type:"myclick",
                data:{
                    str:"hello"
                }
            })
        }
    }

}
//  const {createApp} =Vue;
      const app = Vue.createApp({
        data(){
            return {

            }
        },
        components:{MyBook},
        methods:{
            myClick(event){
                console.log("myClick函数被调用了",event)
            },
            handler(event){
                console.log("niasdhh")
            }
        }

    })
    app.mount("#app")
</script>
</html>